<template>
  <div>
    <el-button type="primary" @click="submit()">submit</el-button>
    <el-button type="success" @click="timeFormat()">Time</el-button>
    a: <ElInputNumber v-model="a" placeholder=""></ElInputNumber> b:
    <ElInputNumber v-model="b" placeholder=""></ElInputNumber> c:
    <ElInputNumber v-model="c" placeholder=""></ElInputNumber>
    <button @click="refresh()">更新</button>
    <div>
      <div class="area" ref="area1"></div>

      <div class="area" ref="area2"></div>
      <div class="area" ref="area3"></div>
    </div>
    <div class="area">
      <Toolbar :editor="mainEditor"></Toolbar>
      <Editor
        style="height: 100px;"
        v-model="blog"
        @onCreated="editorCreated"
      ></Editor>
      <div v-text="blog"></div>
      <div v-html="blog"></div>
    </div>
    <el-button @click="test1()">lodash test1</el-button>
    <el-button type="primary" @click="test2(1)">lodash test1</el-button>
    <el-button @click="ss()">获取动态数据</el-button>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import request from "../../utils/request";
import lodash from "lodash";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import qs from "qs";
import dayjs from "dayjs";
import * as echarts from "echarts";
export default {
  name: "index",
  components: {
    Editor,
    Toolbar,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      a: 1,
      b: 0,
      c: 1,
      // id 对应的 dom组件
      mainEditor: null,
      blog: "",
      area3: null,
      pic3: null,
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    // console.log(echarts)
    //const area1=  document.getElementById("area1")
    this.area1Gene();
    this.area2Gene();
    this.area3 = this.$refs.area3;
    this.area3Gene();
  },
  beforeDestroy() {
    // 释放重量级对象 释放内存 close()
    if (this.mainEditor !== null) {
      this.mainEditor.destory();
    }
  },
  methods: {
    clickedxxx() {
      console.log("xxxxx");
    },
    area3Gene() {
      this.pic3 = echarts.init(this.area3, "dark");

      this.pic3.setOption({
        title: {
          text: "动态数据",
        },
       
      });
      this.ss()
    },
    async ss() {
      const res = await request({
        method: "post",
        url: "http://localhost:8080/api/medical_drug/ss",
      });
      console.log(res.data);
      const xData = [];
      const yData = [];
      for (const ss of res.data) {
        xData.push(ss.operator);
        yData.push(ss.st);
      }
      console.log(xData,yData);
      this.pic3.setOption({
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: yData,
          },
        ],
      });
    },

    area2Gene() {
      const area2 = this.$refs.area2;
      const data = [
        { label: "r", value1: 10 },
        { label: "g", value1: 10 },
        { label: "b", value1: 20 },
      ];
      const data2 = data.map((x) => {
        return {
          name: x.label,
          value: x.value1,
        };
      });

      const pic2 = echarts.init(area2, "dark");
      pic2.setOption({
        title: {
          text: "饼图",
        },
        series: {
          type: "pie",
          radius: ["50%", "75%"],
          data: data2,
        },
      });
      pic2.on("click", this.clickedxxx);
    },
    area1Gene() {
      const xData = [];
      for (let i = -10; i < 10; i++) {
        xData.push(i);
      }
      console.log(xData);
      const yData = [];
      for (let i = 0; i < xData.length; i++) {
        let y = 2 * xData[i] * xData[i] + 3 * xData[i] + 1;
        yData.push(y);
      }
      console.log(yData);
      const area1 = this.$refs.area1;
      const pic = echarts.init(area1);
      pic.setOption({
        title: {
          text: "echarts 图标",
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: yData,
          },
          {
            type: "line",
            data: yData,
          },
        ],
      });
    },
    // sampleM() {},
    submit() {
      const person = {
        username: "zhangsan",
        age: 11,
      };
      console.log(qs.stringify(person));
      console.log(JSON.stringify(person));
    },
    timeFormat() {
      const d = new Date();
      console.log(d);
      const r = dayjs(d).add(1, "M");
      console.log(r);
      const r2 = dayjs(d).format("mm分/YYYY年MM月DD");
      console.log(r2);
    },
    refresh() {
      const xData = [];
      for (let i = -10; i < 10; i++) {
        xData.push(i);
      }
      console.log(xData);
      const yData = [];
      for (let i = 0; i < xData.length; i++) {
        let y = this.a * xData[i] * xData[i] + this.b * xData[i] + this.c;
        yData.push(y);
      }
      console.log(yData);
      const area1 = this.$refs.area1;
      const pic = echarts.init(area1);
      pic.setOption({
        title: {
          text: "echarts 图标",
        },
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: yData,
          },
          {
            type: "line",
            data: yData,
          },
        ],
      });
    },
    editorCreated(editor) {
      // console.log(editor)
      this.mainEditor = Object.seal(editor);
    },
    test1() {
      let a = [
        {
          name: "zhansan",
          age: 11,
        },
        {
          name: "lisi",
          age: 15,
        },
      ];
      let b = [
        {
          name: "wangwu",
          age: 55,
        },
        {
          name: "lisi",
          age: 14,
        },
      ];
      console.log(a, b);
      console.log(lodash.intersectionBy(a, b, "name"));
      console.log(lodash.unionBy(a, b, "name"));
    },
    test2: lodash.throttle(function(val) {
      this.$message.warning("发送数据给后端。。。" + val);
    }, 2000),
  },
  watch: {
    // sampleP(n, o) {},
  },
};
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.area {
  width: 400px;
  height: 400px;
  border: 2px solid black;
  float: left;
}
</style>
